<template>
  <view class="review-card">
    <!-- 头部信息 -->
    <view class="review-header">
      <text class="review-time">{{ archive.studyTime }}</text>
      <!-- <text class="review-tag">课堂点评</text> -->
    </view>
    <!-- 老师信息 -->
    <view class="teacher-info">
      <text class="teacher-name">{{ archive.teacherName }}</text>
    </view>
    <!-- 评分区域 -->
    <view class="rating-section">
      <view class="rating-item">
        <text class="rating-label">综合评分</text>
        <view class="stars">
          <text v-for="(item, index) in archive.score" :key="index"> ★ </text>
        </view>
      </view>
      <view class="rating-item">
        <text class="rating-label">活跃度</text>
        <view class="stars">
          <text v-for="(item, index) in archive.activityScore" :key="index"> ★ </text>
        </view>
      </view>
      <view class="rating-item">
        <text class="rating-label">参与度</text>
        <view class="stars">
          <text v-for="(item, index) in archive.participationScore" :key="index"> ★ </text>
        </view>
      </view>
    </view>
    <!-- 点评内容 -->
    <view class="review-content">
      <view class="content-item">
        <text class="content-text">{{ archive.studyRecord }} </text>
      </view>
    </view>
    <!-- 图片 -->
    <view class="review-image-container">
      <view class="image-grid">
        <image
          v-for="(img, index) in initImageListFromAttachment(archive)"
          :key="index"
          :src="config.baseURL + img"
          mode="aspectFill"
          class="grid-image"
        />
      </view>
    </view>
    <!-- 创建时间 -->
    <view class="create-time">
      <text>创建时间：{{ archive.createTime }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import type { ArchiveItem } from '@/types/archive'
import { config } from '@/global'

const props = defineProps<{
  archive: ArchiveItem
}>()

// 上拉加载更多
const initImageListFromAttachment = (archive: ArchiveItem) => {
  return archive.attachment
    ? archive.attachment.split(';').filter((item) => item.trim() !== '')
    : []
}
</script>
<style scoped lang="scss">
.review-card {
  width: 100%;
  background-color: $archive-card-bg;
  border-radius: $archive-card-radius;
  box-shadow: $archive-card-shadow;
  padding: 24rpx;
  margin-bottom: $archive-spacing;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  }
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.review-time {
  font-size: 24rpx;
  color: $archive-text-auxiliary;
}

.review-tag {
  background-color: #e6f4ff;
  color: $archive-primary-color;
  padding: 4rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
}

.teacher-info {
  margin-bottom: 20rpx;
}

.teacher-name {
  font-size: 28rpx;
  font-weight: 600;
  color: $archive-text-main;
}

.rating-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
  padding: 16rpx 0;
  background-color: #fff8f0;
  border-radius: 10rpx;
}

.rating-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
}

.rating-label {
  font-size: 24rpx;
  color: $archive-text-secondary;
  margin-bottom: 8rpx;
}

.stars {
  font-size: 28rpx;
  color: $archive-accent-color;
  letter-spacing: 2rpx;
}

.review-content {
  margin-bottom: 24rpx;
}

.content-item {
  display: flex;
  margin-bottom: 16rpx;
  align-items: flex-start;
}

.content-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
  min-width: 30rpx;
  text-align: center;
  color: $archive-primary-color;
}

.content-text {
  font-size: 26rpx;
  color: $archive-text-main;
  line-height: 40rpx;
  word-break: break-all;
}

.highlight {
  font-weight: 600;
  color: $archive-primary-color;
}

.review-image-container {
  width: 100%;
  margin-bottom: 20rpx;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
}

.grid-image {
  width: 100%;
  height: 200rpx;
  border-radius: 8rpx;
  object-fit: cover;
  background-color: #f5f5f5;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.03);
  }
}

.create-time {
  font-size: 22rpx;
  color: $archive-text-auxiliary;
  text-align: right;
  padding-top: 16rpx;
  border-top: 1rpx dashed #f0f0f0;
}
</style>
